<!-- 血压统计 -->
<template>
  <border noMore noborder cardTitle="血压统计">
    <div class="info">
      <Chart :optionData="option_column" style="height: 100%"></Chart>
    </div>
  </border>
</template>

<script>
import border from "./border.vue";
import StatisticsMixins from "../StatisticsMixins";
export default {
  name: "GlycemicCount",
  mixins: [StatisticsMixins],
  components: { border },
  data () {
    return {
      option_column: {
        tooltip: { trigger: "axis" },
        grid: { top: "40", left: "3%", right: "4%", bottom: "0", containLabel: true },
        legend: {
          itemGap: 40,
          data: ["偏低", "正常", "轻度", "中度", "重度"],
          textStyle: { color: "#fff", fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: "#fff" },
          boundaryGap: true
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "rgba(157, 175, 214, .3)" }
          },
          axisLabel: { color: "#fff" }
        },
        series: [
          {
            name: "偏低",
            type: "bar",
            stack: "血压分布",
            data: [5, 8, 6, 7, 5, 6, 4],
            barWidth: 15,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#21f0f3" },
                  { offset: 1, color: "#4395ce" }
                ]
              }
            }
          },
          {
            name: "正常",
            type: "bar",
            stack: "血压分布",
            data: [15, 18, 16, 17, 15, 16, 14],
            barWidth: 15,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#67b0f9" },
                  { offset: 1, color: "#6eace7" }
                ]
              }
            }
          },
          {
            name: "轻度",
            type: "bar",
            stack: "血压分布",
            data: [10, 12, 11, 13, 10, 12, 9],
            barWidth: 15,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#ffc74a" },
                  { offset: 1, color: "#efc356" }
                ]
              }
            }
          },
          {
            name: "中度",
            type: "bar",
            stack: "血压分布",
            data: [7, 9, 8, 10, 7, 8, 6],
            barWidth: 15,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#f9a751" },
                  { offset: 1, color: "#ee9a4e" }
                ]
              }
            }
          },
          {
            name: "重度",
            type: "bar",
            stack: "血压分布",
            data: [3, 4, 5, 3, 4, 5, 2],
            barWidth: 15,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#f34965" },
                  { offset: 1, color: "#e2415e" }
                ]
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.info {
  font-size: 0.18rem;
  padding: 0.15rem 0.15rem .1rem;
  height: 100%;
}
</style>
